<template>
  <div class="newTransfer">
    <div class="mask" v-show="shownum"></div>
    <div class="_num" v-show="shownum">
      <div>
        <p>输入数量</p>
        <i @click="closenum" class="el-icon-close"></i>
      </div>
    </div>
    <div class="enterBarcode">
      <p>货号</p>
      <el-input 
        ref="kindsNumberInp"
        style="width:175px"
        @keyup.enter.native="kindsNumberEnter" 
        v-model="kindsNumber" 
        placeholder="输入货号，输完按回车">
      </el-input>
    </div>
    <div class="build-info-4">
      <el-table
        id="codeTable"
        border
        :data="codeData"
        class="tb-edit"
        style="width: 100%;margin-bottom:15px"
        max-height="148px"
        @cell-click="cellClick"
        :header-cell-style="{background:'#f4f4f4',padding:0,height:'40px'}"
        :cell-style="{padding:0,height:'36px'}">

        <el-table-column
          :label="header"
          width="150">
        </el-table-column>
        <el-table-column
          prop="colorName"
          label="颜色"
          width="100">
        </el-table-column>

        <template v-for="i in sizeList" >
          <el-table-column
            :prop="i"
            :label="i"
            :key="i+Math.random()">
            <template slot-scope="scope">

              <el-input size="small" 
                class="innerInp"
                v-model="scope.row[i]" 
                @blur="handleInputBlurResult($event,{index:scope.$index,key:i,result:scope.row[i]})" 
                @keyup.enter.native="inpEnter">
              </el-input>
              <!-- <span>{{scope.row[i]}}</span> -->

            </template>
          </el-table-column>
        </template>
        
      </el-table>
    </div>
    <div>
      <el-button @click="closenum">取消</el-button>
      <el-button @click="closenum" type="primary" plain>确定</el-button>
      <el-button @click="continueInput" type="primary">继续录入</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    
  },
  methods: {
    closenum(){
      this.$emit('closenum')
    },
    kindsNumberEnter(){
      if (this.jxAgent) return
      if (this.kindsNumber) {
        if (!this.outNo) {
          this.$message.error("调出客户不能为空")
          return
        }
        if (this.inputNo == this.outNo) {
          this.$message.error("调入和调出客户不能相同")
          return
        }
        if (!this.outNo) {
          this.transferCargoIntention = '直接调转'
        }
        if (!this.shownum) this.shownum = true
        
        getKindsNumberList({kindsNumberStr: this.kindsNumber}).then(res => {
          // console.log(res)
          if(res.data.data.data == ''){
            this.$message.warning('未查询查到此款号信息')
            return
          }
          if (res.data.code == 200) {
              this.header = res.data.data.data[0].styleNumber
            // 品牌公司查条码规律详情
            getBarCode({company:res.data.data.data[0].brandedCompany}).then(res => {
              this.manufacturerBarCode = res.data.data[0]
            })
            // console.log(this.manufacturerBarCode)
            // 输入款号显示中间表和尺码信息   ZZZ-AAS
            res.data.data.data.sort((a,b) => {
              return a.relevanceSize.localeCompare(b.relevanceSize)
            })
            let tmp = res.data.data.data

            // 中间表  尺码表头
            this.sizeList = [tmp[0].size]
            let isExistSize = 0
            for (const i of tmp) {
              for (const j of this.sizeList) {
                if (j == i.size) {
                  isExistSize = 0
                  break
                }
                isExistSize = 1
              }
              if (isExistSize) {
                this.sizeList.push(i.size)
              }
            }

            // 中间表
            let tmpCodeData = [{colorNo:tmp[0].colorNo,colorName:tmp[0].colorName}]
            let isExistColor = 0
            for (const i of tmp) {
              for (const j of tmpCodeData) {
                if (j.colorName == i.colorName) {
                  isExistColor = 0
                  break
                }
                isExistColor = 1
              }
              if (isExistColor) {
                tmpCodeData.push({colorNo:i.colorNo,colorName:i.colorName})
              }
            }
            tmpCodeData.forEach(e => {
              this.sizeList.forEach(f => {
                e[f] = ''
              })
            })
            this.codeData = tmpCodeData
            this.inpList = this.getInput()
            let codeTable = document.getElementById('codeTable')
            let inputs = codeTable.getElementsByTagName('input')
            // console.log(inputs)
            let int = setInterval(() => {
              clearInterval(int)
              inputs[0].focus()
              inputs[inputs.length - 1].onkeyup = e => {
                if (window.event.keyCode == 13) {
                  this.continueInput()
                  inputs[inputs.length - 1].onkeyup = () => {}
                }
              }
            }, 100)
          }
        })
      }
    },
  }
}
</script>

<style scoped>
  .mask { 
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color:#000;
    opacity:0.3;
    z-index:9;
  }
  ._num {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:900px;
    z-index:999;
    background:white;
  }
  ._num>div:first-child {
    display:flex;
    padding:10px 15px;
    height:40px;
    background:#f4f4f4;
    justify-content:space-between;
    margin-bottom:15px;
  }
  ._num>div:nth-child(2) {
    padding:0 15px;
  }
  ._num>div:last-child>div:last-child {
    float:right;
    margin-bottom:10px;
  }
  ._num>div:first-child>p:first-child {
    font-weight:700;
  }

  .enterBarcode{
    background-color: #f4f4f4;
    height: 60px;
    padding: 15px 0 0 10px;
    margin-bottom: 15px;
  }
  .enterBarcode p{
    display: inline;
    margin-right: 10px;
  }
</style>

<style>
  .build-info-4 .el-input__inner{
    border: 0px;
  }
  .build-info-4 .el-input__inner:focus{
    border: 1px solid #017aff;
  }
</style>